<template>
<div class="activity-body">
  <div class="activity-ad">
    <img :src="prefixImg+ openedActList.detailBannerImgUrl" alt="" @error="catchErrorImage($event)">
    <!-- <img :src="require('./img/brandsale_banner.png')"> -->
  </div>
  <div class="no-content" v-if="!leftFieldNumber">
    暂无活动商品
  </div>
  <div class="activity_item activity-head-box knife_container" v-else>
    <span class="smalltitle">{{timerText}}</span>
    <div class="acti_entry_timer" v-if="timerresult">
      <template v-if="dayNum > 0">
        <span class="week-time">{{timerresult.substr(0,1)}}</span>
        <span class="timer-text">天</span>
      </template>
      <template v-else>
        <span class="week-time">{{timerresult.substr(2,2)}}</span>
        <span class="week-colon">:</span>
        <span class="week-time">{{timerresult.substr(5,2)}}</span>
        <span class="week-colon">:</span>
        <span class="week-time">{{timerresult.substr(8,2)}}</span>
      </template>
    </div>
  </div>
  
  <div class="activity-wrap">
    <BargainProduct proType="bargin" :productList="allGoods" :fielsStatus="fielsStatus" :actDate="actDate" @refresh="fetchActivityGoods"></BargainProduct>
  </div>
  <!-- 活动规则 -->
  <div class="rule-box activity-wrap" v-if="openedActList.content">
    <div class="rule-title">活动规则</div>
    <div class="rule-content" v-html="openedActList.content">
    </div>
  </div>
</div>
</template>

<script>
import { BargainProduct, BrandProduct } from '@/components/index'
import { hotSaleActivity } from '@/service/get-data'
import { countDown } from '@/tool/tool'
import { prefixImg } from '@/tool/index'
export default {
  components: {
    BargainProduct,
    BrandProduct
  },
  computed: {
    allGoods () {
      let allGoods = []
      let good = (this.openedActList && this.openedActList.activityProductVOS) || []
      for (let j in this.openedActList.activityProductVOS) {
        good[j].startTime = this.openedActList.startTime
        good[j].endTime = this.openedActList.endTime
        if (!good[j].stockLimit) {
          good[j].stock = 9999
        }
        allGoods.push(good[j])
      }
      var sortArr = allGoods.sort(function (obj1, obj2) {
        let val1 = obj1.stock
        let val2 = obj2.stock
        if (val1 < val2) {
          return 1
        } else if (val1 > val2) {
          return -1
        } else {
          return 0
        }
      })
      return sortArr
    },
    leftFieldNumber () {
      if (!('id' in this.openedActList)) { return 0 }
      if (!this.openedActList.activityProductVOS.length) { return 0 }
      return this.openedActList.activityProductVOS.length
    },
    dayNum () {
      return (this.timerresult && this.timerresult.substr(0, 1) - 0) || 0
    },
    activityProLen () {
      return (this.activeGoods && this.activeGoods.voList && this.activeGoods.voList.length) || 0
    }
  },
  data () {
    return {
      prefixImg,
      activeGoods: {},
      activityId: '',
      activityList: [],
      timerText: '',
      globalTimer: null,
      timerresult: '',
      openedActList: {},
      fielsStatus: 0,
      actDate: ''
    }
  },
  methods: {
    catchErrorImage (e) {
      e.target.src = require('img/bargainhead.png')
    },
    async fetchActivityGoods () {
      let res = await hotSaleActivity(this.$store.state.user.username)
      console.log('爆品')
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.activeGoods = res.data.data
        this.openedActList = {}
        this.openedActList = (res.data.data && res.data.data.voList[0]) || {}
        // 无活动
        if (!('id' in this.openedActList)) return
        // 有活动
        let _str = this.openedActList.startTime.split(' ')[0].split('-')
        this.actDate = `${_str[1]}月${_str[2]}日开启 敬请期待`
        let startTimeParm = this.openedActList.startTime
        let endTimeParm = this.openedActList.endTime
        const starTimeStamp = (new Date(startTimeParm.replace(/-/g, '/'))).getTime()
        const endTimeStamp = (new Date(endTimeParm.replace(/-/g, '/'))).getTime()
        let nowTime = (new Date()).getTime()
        // 周周活动开始
        if (nowTime > starTimeStamp && nowTime <= endTimeStamp) {
          this.timerText = '距结束'
          this.fielsStatus = 1
          this.startCountFn(endTimeParm)
          return
        }
        // 周周活动还未开始
        if (nowTime < starTimeStamp) {
          this.timerText = '距开始'
          this.fielsStatus = 0
          this.startCountFn(startTimeParm)
        }
        // 周周活动结束
        if (nowTime > endTimeStamp) {
          this.timerText = '本场活动结束'
          this.fielsStatus = 2
        }
      } else {
        this.$message.error({
          message: res.data.resultMsg
        })
      }
    },
    // 倒计时 2018-09-10 2018-09-30
    startCountFn (timeParm) {
      let vm = this
      clearInterval(vm.globalTimer)
      vm.globalTimer = null
      vm.globalTimer = setInterval(function () {
        vm.timerresult = countDown(timeParm)
        // 剩余时间<=0
        if (vm.timerresult + '' === 'false') {
          clearInterval(vm.globalTimer)
          vm.globalTimer = null
          setTimeout(() => {
            vm.fetchActivityGoods()
          }, 800)
        }
      }, 1000)
    }
  },
  mounted () {
    this.fetchActivityGoods()
  },
  filters: {
  },
  beforeDestroy () {
    clearInterval(this.globalTimer)
  }
}
</script>

<style lang="scss" scoped>
$red:#D4230F;
.activity-body{
  // background:#F6ADAD;
  padding-bottom: 30px;
}
.activity-ad{
  width: 100%;
  height: 580px;
  position: relative;
  // background-image: url("./img/brandsale_banner.png");
  // background-repeat: no-repeat;
  // background-size: cover;
  // background-position: center;
  img{
    width: 100%;
    height: 100%;
    transform: translate(-50%);
    position: absolute;
    left: 50%;
  }
}
.activity-head-box{
  width:1200px;
  margin: 30px auto 0;
  height: 60px;
  line-height: 60px;
  background: $red;
  padding: 0 20px;
  color: #fff;
  box-sizing: border-box;
  .smalltitle{
    font-size: 18px;
    padding-right: 20px;
  }
}
.activity-wrap{
  width: 1200px;
  margin: 10px auto 30px;
}
.acti_entry_timer{
  display:inline-block;
  position: absolute;
  margin-top: 14px;
  line-height: 30px;
  .timer-text{
    color:#fff;
    line-height:38px;
    font-size:18px;
    vertical-align: top;
  }
  .week-time{
    font-family: PingFangSC-Semibold, Microsoft YaHei;
    font-weight: 600;
    background: #ffffff;
    border-radius: 4px;
    width: 42px;
    height: 35px;
    display: inline-block;
    vertical-align: top;
    color: $red;
    font-size: 20px;
    line-height: 35px;
    text-align: center;
    letter-spacing: 2px;
  }
  .week-colon {
    font-size: 20px;
    line-height: 40px;
    vertical-align: top;
    display: inline-block;
  }
}

</style>
